<template>
	<topAndMenu active="/permission">
	<div style="width:100%;padding:20px;">
	<el-button type="primary" @click="add">添加</el-button>
	  <el-dialog
	    v-model="dialogVisible_add"
	    title="Tips"
	    width="500"
	  >
	    <el-input type="text" v-model="name" placeholder="请输入添加的权限名"></el-input>
		<!-- <el-select
		      v-model="categoryValue"
		      placeholder="请选择分类"
		      size="large"
		      style="width: 240px"
		    >
		      <el-option
		        v-for="item in options"
		        :key="item.id"
		        :label="item.name"
		        :value="item.id"
		      />
		    </el-select> -->
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible_add = false">Cancel</el-button>
	        <el-button type="primary" @click="addSubmit">
	          Confirm
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	  <el-dialog
	    v-model="dialogVisible_update"
	    title="Tips"
	    width="500"
	  >
	    <el-input type="text" v-model="updateName" placeholder="请输入想修改的权限名"></el-input>
		<!-- <el-select
		      v-model="categoryValue"
		      placeholder="请选择分类"
		      size="large"
		      style="width: 240px"
		    >
		      <el-option
		        v-for="item in options"
		        :key="item.id"
		        :label="item.name"
		        :value="item.id"
		      />
		    </el-select> -->
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible_update = false">Cancel</el-button>
	        <el-button type="primary" @click="updateSubmit">
	          Confirm
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	  <el-dialog
	    v-model="dialogVisible_del"
	    title="Tips"
	    width="500"
	  >
	    确认要删除 {{delName}} 吗？
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible_del = false">Cancel</el-button>
	        <el-button type="primary" @click="delSubmit">
	          Confirm
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	   <el-table :data="tableData" style="width: 100%;margin-bottom:50px;" v-loading="loading">
		   <el-table-column prop="id" label="id" width="80"/>
	      <el-table-column prop="name" label="名称" width="380" />
		  
	     <!-- <el-table-column prop="createTime" label="创建时间" width="180" />
	      <el-table-column prop="updateTime" label="更新时间" width="180" /> -->
	      <el-table-column>
			  <template #header>操作</template>
			  <template #default="scope">
				  <el-button type="warning" @click="update(scope.row.id,scope.row.name)">编辑</el-button>
				  <el-button type="danger" @click="del(scope.row.id,scope.row.name)">删除</el-button>
			  </template>
		  </el-table-column>
	    </el-table>
		  <el-pagination
		      v-model:current-page="pageNum"
		      v-model:page-size="pageSize"
		      :page-sizes="[1,5,10,20]"
		      :background="background"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total"
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		    />
	</div>
	</topAndMenu>
</template>

<script setup>
	import {ref,onMounted} from "vue"
	import http from "../../request.js"
	import topAndMenu from "../components/topAndMenu.vue"
	const dialogVisible_add = ref(false)
	const name = ref("")
	const loading = ref(true)
	onMounted(()=>{
		console.log("onmoutend")
		queryPage()
	})
	const options = ref([])
	const categoryValue = ref(undefined)
	function add(){
		dialogVisible_add.value = true
		// http.get("/user/queryPage?pageSize=0&pageNum=0").then(res=>{
		// 	options.value = res.data.data.list
		// })
	}
	function addSubmit(){
		http.post("/permission/add",{name:name.value}).then(res=>{
			let {code} = res.data
			if(code==200){
				dialogVisible_add.value = false
				queryPage()
			}
		})
	}
	function handleSizeChange(){
		queryPage()
	}
	function handleCurrentChange(){
		queryPage()
	}
	const tableData = ref([])
	const pageNum = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	function queryPage(){
		http.get(`/permission/queryPage?pageSize=${pageSize.value}&pageNum=${pageNum.value}`).then(res=>{
			tableData.value = res.data.data.list
			total.value = res.data.data.total
			loading.value = false
		})
	}
	const delId = ref(undefined)
	const delName = ref(undefined)
	const dialogVisible_del = ref(false)
	function del(id,name){
		delId.value = id
		delName.value = name
		dialogVisible_del.value = true
	}
	function delSubmit(){
		http.delete("/permission/del?id="+delId.value).then(res=>{
			dialogVisible_del.value = false
			queryPage()
		})
	}
	const updateId=ref(undefined)
	const updateName=ref("")
	const dialogVisible_update = ref(false)
	function update(id,name){
		updateId.value = id
		updateName.value = name
		dialogVisible_update.value = true
	}
	function updateSubmit(){
		http.post("/permission/update",{id:updateId.value,name:updateName.value}).then(res=>{
			dialogVisible_update.value = false
			queryPage()
		})
	}
</script>

<style>
</style>